<script lang="ts" setup>
import { watch, onMounted, ref } from 'vue';
import { getSysRoleListEnabledApi } from '@/common/apis/role'
import { putSysUserAssignRoles } from '@/common/apis/information'
import { message } from 'ant-design-vue';
const open = ref<boolean>(false);
// 储存角色数据
const roleData = ref()
const props = defineProps({
    staffinformation: {
        type: Object, // 数据类型
        requied: true, // 是否必传
    }
})


// 储存用户选中的id
const selectedPermIds = ref<number[]>([]); // 存储用户选择的权限 ID
// 储存传过来的id
const currentRoleId = ref()

const showModal = () => {
    open.value = true;
};

// 获取角色列表
const getSysRoleListEnabledData = async () => {
    const res = await getSysRoleListEnabledApi()
    roleData.value = res.data.data

}

const onClickChecked = (id: number) => {
    const index = selectedPermIds.value.indexOf(id);
    if (index === -1) {
        selectedPermIds.value.push(id); // 添加权限 ID
    } else {
        selectedPermIds.value.splice(index, 1); // 移除权限 ID
    }
    console.log(id, 'iddddd')
}

// 点击确定
const handleOk = async (id: string) => {
    currentRoleId.value = id
    await putSysUserAssignRoles({
        id: currentRoleId.value,
        roleIds: selectedPermIds.value
    })
    message.success('分配权限成功')
    open.value = false;
};

// 监听 roleDetail 的变化
watch(
    () => props.staffinformation,
    (newRoleDetail) => {
        selectedPermIds.value = [...newRoleDetail?.roleIds]; // 更新选中的权限 ID
    },
);





onMounted(() => {
    getSysRoleListEnabledData()
})

defineExpose({
    showModal
})

</script>

<template>
    <div>
        <a-modal v-model:open="open" width="700px" title="分配角色" @ok="handleOk(props.staffinformation?.id)">
            <a-checkbox :checked="selectedPermIds.includes(item.id)" @change="onClickChecked(item.id)"
                v-for="item in roleData" :key="item.id">{{ item.name
                }}</a-checkbox>
        </a-modal>
    </div>
</template>